<!--
*@Author: zt
*@Description: 值班备勤详细情况、部门考勤
*@Date: 2024-08-20
-->
<template>
  <a-layout
    class="f-h-100 f-w-100 u-work-detial s-bg-white"
    :class="{ 'u-dialog-detial': currentTitle }">
    <a-layout-sider
      theme="light"
      width="320"
      style="padding: 3px; border-radius: 16px; background-color: #fff"
      class="f-margin-r16 f-h-100"
      v-if="leadTabData.length != 0 || seTabData.length != 0">
      <a-layout class="f-h-100">
        <u-table-header
          style="padding: 0"
          v-if="leadTabData.length != 0">
          <u-busi-card
            title="值班领导"
            class="u-now-work">
            <a-list
              :data-source="leadTabData"
              :split="false">
              <template #renderItem="{ item }">
                <a-list-item
                  style="padding: 0"
                  class="a-list-item f-margin-b20">
                  <a-space
                    size="middle"
                    direction="vertical"
                    class="f-w-100">
                    <a-row style="padding: 16px 16px 0">
                      <a-space
                        size="middle"
                        style="font-size: var(--font-size-level-2)"
                        :style="{ color: item.color }">
                        <u-icon-font
                          :type="item.isleader == 1 ? 'icon-a-zu230' : 'icon-zhibankeyuan'"
                          style="color: #1890ff"></u-icon-font>
                        <span>值班领导</span>
                      </a-space>
                    </a-row>
                    <a-row style="padding: 0 16px 6px">
                      <a-col :span="6">
                        <a-avatar
                          :size="60"
                          :style="{
                            backgroundColor: '#00a2ae',
                            verticalAlign: 'middle',
                            fontSize: '22px',
                          }">
                          {{ (item["fkusername"] || "")[0] }}
                        </a-avatar>
                      </a-col>
                      <a-col :span="18">
                        <a-space
                          direction="vertical"
                          class="f-margin-l16"
                          align="middle">
                          <a-space>
                            <span class="u-name-span f-font-family">姓名:</span>
                            <span class="u-value-span f-font-family">
                              {{ item.fkusername }}
                            </span>
                          </a-space>
                          <a-space>
                            <span class="u-name-span">电话:</span>
                            <span class="u-value-span f-font-family">
                              {{ item.tel }}
                            </span>
                          </a-space>
                        </a-space>
                      </a-col>
                    </a-row>
                    <a-row
                      class="f-w-100"
                      style="border-top: 1px solid #d9d9d9">
                      <a-col
                        :span="24"
                        align="center"
                        style="padding: 14px 0">
                        <a-space
                          @click="
                            () => {
                              currentChatUser = {
                                ...item,
                                keyid: item.fkuserid,
                                types: 2,
                                groupNames: item.fkusername,
                              };
                              chatEventBus.emit('openGroup', currentChatUser);
                            }
                          ">
                          <u-icon-font
                            type="icon-zaixiangoutong"
                            style="color: #aaa"></u-icon-font>
                          <span class="u-value-span f-font-family f-cursor">在线沟通</span>
                        </a-space>
                      </a-col>
                    </a-row>
                  </a-space>
                </a-list-item>
              </template>
            </a-list>
          </u-busi-card>
        </u-table-header>

        <u-table-content
          style="padding: 0"
          v-if="seTabData.length != 0">
          <!-- 值班科员 -->
          <a-row style="padding: 16px 16px 0">
            <a-space
              size="middle"
              style="font-size: var(--font-size-level-2); color: rgba(250, 140, 22, 1)">
              <u-icon-font
                type="icon-zhibankeyuan"
                style="color: rgba(250, 140, 22, 1)"></u-icon-font>
              <span>值班科员</span>
            </a-space>
          </a-row>
          <div style="height: calc(100% - 40px)">
            <u-table
              :columns="seColumns"
              :data="seTabData"
              :showHeader="false"
              :row-selection="false"
              :pagination="false"
              :scroll="{ y: 'calc(100vh - 300px)' }"></u-table>
          </div>
        </u-table-content>
      </a-layout>
    </a-layout-sider>

    <a-layout-content
      class="s-bg-white f-padding-20"
      style="border-radius: 16px">
      <a-layout
        class="f-h-100"
        style="background: #fff">
        <a-layout-header style="padding: 0; height: auto; background: #fff; line-height: auto">
          <a-row>
            <a-col flex="1">
              <a-list
                :grid="{ gutter: 16, column: sumData.length }"
                :data-source="sumData">
                <template #renderItem="{ item }">
                  <a-list-item
                    style="padding: 0; margin-block-end: 0"
                    @click="getClickType(item.clickType)">
                    <div
                      style="width: 100%; padding: 13px; border: 1px solid #d9d9d9; border-radius: 16px"
                      :class="itemClickType == item.clickType ? 'itemActive' : ''"
                      :style="{
                        background: currentTitle == item.title ? '#ECF6FF' : '#fff',
                        cursor: 'pointer',
                      }">
                      <a-row justify="center">
                        <a-space>
                          <a-image
                            v-if="item.img"
                            :src="item.img"
                            :preview="false"></a-image>
                          <a-space direction="vertical">
                            <span class="u-span-value f-font-family">
                              {{ item.title }}
                            </span>
                            <span
                              class="u-span-value u-number-span"
                              style="font-size: 28px"
                              :style="{ color: item.valueColor }">
                              <span
                                class="u-sum-title"
                                :style="{ color: item.valueColor }">
                                {{ item.value }}
                              </span>
                            </span>
                          </a-space>
                        </a-space>
                      </a-row>
                    </div>
                  </a-list-item>
                </template>
              </a-list>
            </a-col>
          </a-row>
          <a-row class="f-w-100 f-margin-t16">
            <u-form
              :model="searchF1.model"
              :gutter="16"
              :elements="searchEl"
              :isSearch="true"
              @formChange="getSearch(1)"
              class="f-w-auto">
              <a-col>
                <a-space>
                  <u-icon-button @click="getSearch(1)">查询</u-icon-button>
                </a-space>
              </a-col>
            </u-form>
          </a-row>
        </a-layout-header>
        <a-layout-content>
          <u-table
            :columns="columns"
            :data="tabData1"
            v-model:pagination="pagenation"
            @change="getSearch"
            :scroll="{ y: 'calc(100vh - 415px)' }"></u-table>
        </a-layout-content>
      </a-layout>
    </a-layout-content>
  </a-layout>

  <!-- 快速短信 -->
  <FastSMS
    v-model:open="showSms"
    width="60%"
    title="发送短信"
    :showSider="false"
    @close="showSms = false" />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, h } from "vue";
import { useRoute } from "vue-router";
import { urlFile } from "@/util/common";
import { storeToRefs } from "pinia";
import { useBaseStore } from "@/store";
import { numberC } from "@/util/common";
import { Avatar } from "ant-design-vue";
import { UIconFont } from "@/components/common/iconfont";
import { cloneDeep } from "lodash";
import { chatEventBus } from "@/util/eventBus";
import FastSMS from "@/views/oa/assist/sms/fastSms/Index.vue";
import dayjs from "dayjs";

import * as beDutyApi from "@/service/administration/beDuty/index";
import * as depUserApi from "@/service/personnel/work/index";

const { DUTY_TYPE, deptData } = storeToRefs(useBaseStore());

let isCardShow = ref(false);
const route = useRoute();
interface Props {
  currentTitle?: string;
}
const props = defineProps<Props>();
let depUserOptions = ref<any>({});

// 汇总人员数据
let originSumData = ref<any[]>([
  {
    title: "全部人数",
    img: "",
    value: 0,
    key: "allUser",
    valueColor: "#333",
    bgColor: "#fff",
    marginRight: "16px",
    clickType: 1,
  },
  {
    title: "在岗",
    img: urlFile("work/detial/1.png"),
    value: 0,
    key: "onUserNumber",
    type: ["work"],
    valueColor: "#13C2C2",
    bgColor: "#ECF6FF",
    clickType: 2,
  },
  {
    title: "值班",
    img: urlFile("work/detial/2.png"),
    value: 0,
    key: "dutyNumber",
    valueColor: "#1890FF",
    bgColor: "#fff",
    marginRight: "16px",
    class: "u-call2",
    clickType: 3,
  },
  {
    title: "备勤",
    img: urlFile("work/detial/3.png"),
    value: 0,
    key: "standNumber",
    type: ["vocation"],
    valueColor: "#FA8C16",
    bgColor: "#fff",
    marginRight: "16px",
    clickType: 4,
  },
  {
    title: "出差",
    img: urlFile("work/detial/4.png"),
    value: 0,
    type: ["work"],
    key: "evectionNumber",
    valueColor: "#52C41A",
    bgColor: "#fff",
    marginRight: "16px",
    clickType: 5,
  },
  {
    title: "休假",
    img: urlFile("work/detial/5.png"),
    value: 0,
    key: "leaveNumber",
    type: ["work"],
    valueColor: "#9254DE",
    bgColor: "#fff",
    marginRight: "16px",
    clickType: 6,
  },
  {
    title: "离驻地",
    img: urlFile("work/detial/6.png"),
    value: 0,
    key: "leavecdNumber",
    valueColor: "#EF4757",
    bgColor: "#fff",
    marginRight: "16px",
    clickType: 7,
  },
]);
let sumData = ref<any[]>([]);

// 列表
let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: (total) => `共 ${total} 条`,
});
let searchF = reactive<any>({
  model: {
    backuptype: 2,
    pageStatus: 2,
  },
});
let searchF1 = reactive<any>({
  model: {
    itemtype: 1,
    fkdeptid: "",
    dateTime: dayjs().format("YYYY-MM-DD"),
  },
});
const formItemProps: FormItemProps = {
  labelWidth: "80px",
  style: {
    width: "230px",
  },
};
const searchEl: Array<_IFormEl> = [
  {
    label: "日期",
    key: "dateTime",
    element: "datepicker",
    formItemProps: {
      ...formItemProps,
      labelWidth: "50px",
    },
    componentProps: {
      allowClear: false,
    },
  },
  {
    label: "部门",
    key: "fkdeptid",
    element: "select",
    formItemProps: { ...formItemProps, labelWidth: "50px" },
    componentProps: {
      options: deptData.value,
    },
  },
  {
    label: "模糊查询",
    key: "keywords",
    element: "input",
    formItemProps: formItemProps,
    componentProps: { placeholder: "名字/电话号码" },
  },
];

let leadTabData = ref([]);
let seTabData = ref([]);
let seColumns = ref<any>([
  {
    dataIndex: "index",
    title: "头像",
    width: 40,
    align: "center",
    customRender: ({ index, record }) => {
      return h(
        Avatar,
        {
          style: {
            background: "linear-gradient( 348deg, #1890FF 0%, #DBEDFE 100%)",
          },
        },
        record["fkusername"][0]
      );
    },
  },
  { dataIndex: "fkusername", title: "名称", width: 70 },
  { dataIndex: "tel", title: "电话", width: 100, align: "center" },
  {
    dataIndex: "chat",
    title: "群聊",
    width: 40,
    align: "center",
    customRender: ({ index, record }) => {
      return h(UIconFont, {
        title: "在线沟通",
        type: "icon-zaixiangoutong",
        style: { color: "#1890ff" },
        onClick: () => {
          currentChatUser = {
            ...record,
            keyid: record.fkuserid,
            types: 2,
            groupNames: record.fkusername,
          };
          // showChat.value = true;
          chatEventBus.emit("openGroup", currentChatUser);
        },
      });
    },
  },
]);

let tabData1 = ref([]);
let columns = ref<any>([
  {
    dataIndex: "index",
    title: "序号",
    width: 60,
    align: "center",
    customRender: ({ index }) => {
      return index + 1;
    },
  },
  { dataIndex: "fkdeptname", title: "部门", width: 340 },
  { dataIndex: "fkusername", title: "姓名", width: 150, align: "center" },
  { dataIndex: "phone", title: "联系电话", width: 160 },
  { dataIndex: "dutyStatus", title: "在岗情况", width: 120, align: "center" },
]);

// 在线沟通
let currentChatUser = ref<object>({});
let showSms = ref<boolean>(false);

let itemClickType = ref<any>();
const getClickType = async (ClickType: number) => {
  itemClickType.value = ClickType;
  searchF1.model["itemtype"] = ClickType;
  await getSearch(1);
};

// 查询数据
const getSearch = async (current?: number) => {
  await isNoWorkDay();

  if (current == 1) {
    pagenation.current = current;
  }
  searchF.current = pagenation.current;
  searchF.size = pagenation.pageSize;

  searchF1.current = pagenation.current;
  searchF1.size = pagenation.pageSize;

  searchF.model["dateTime"] = searchF1.model["dateTime"];

  let tform = JSON.parse(JSON.stringify(searchF));

  //值班人员数据
  const res = await beDutyApi.page({ ...pagenation, ...tform });
  let tabData = [];
  if (res.code == 0) {
    tabData = res.data.records;
  }
  DUTY_TYPE.value.map((e) => {
    tabData.map((index) => {
      if (index.duties == e.code || index.duties == e.id) {
        index["dutiesName"] = e.name;
      }
    });
  });

  leadTabData.value = tabData.filter((item) => item.isleader == 1);
  seTabData.value = tabData.filter((item) => item.isleader != 1);

  const result = await beDutyApi.selectStandDeptPage(searchF1);
  if (result.code == 0) {
    tabData1.value = result.data.records;
    pagenation.total = result.data.total;
  }
};

/**人数 */
const getDepuser = async () => {
  const res = await depUserApi.deptUser({
    datetime: dayjs(dayjs(searchF1.model.dateTime).valueOf()).format("YYYY-MM-DD"),
  });
  if (res.code == 0 && res.data) {
    for (let key in res.data) {
      depUserOptions.value[key] = res.data[key];
    }
    sumData.value = cloneDeep(originSumData.value);
    sumData.value.forEach((i) => {
      i.value = numberC(depUserOptions.value[i.key]);
    });

    // 是否显示备勤
    let filterType = isCardShow.value == false ? "vocation" : "work";
    sumData.value = sumData.value.filter((i) => !(i["type"] || []).includes(filterType));
  }
};

// 查询法定节假日
const wordDays = ref<any[]>([])
const isNoWorkDay = async () => {
  const nowDay = searchF1.model["dateTime"];
  isCardShow.value = wordDays.value.some((i) => dayjs(i.DAY).format("YYYY-MM-DD") == searchF1.model["dateTime"]);
};

// 获取工作日数据
const getWorkDay = async () => {
  try {
    const result = await beDutyApi.selectNoWorkDay();
    if(result.code == 0) {
      wordDays.value = result.data
    }
  } catch (error) {}
}

onMounted(async () => {
  await getWorkDay();
  await getDepuser();
  itemClickType.value = numberC(localStorage.getItem("clickType"));
  if (itemClickType.value) {
    getClickType(numberC(itemClickType.value));
    localStorage.removeItem("clickType");
  } else {
    itemClickType.value = 1;
    await getSearch(1);
  }
});
</script>

<style lang="scss">
.u-work-detial {
  background-color: rgb(240, 242, 247);
  overflow: auto;

  .u-now-work {
    .ant-card-body {
      padding: 0 11px !important;
    }
  }

  .u-name-span {
    font-weight: 400;
    font-size: var(--font-size-level-1);
    color: #666666;
  }

  .u-value-span {
    font-weight: 400;
    font-size: var(--font-size-level-1);
    color: #333333;
  }

  .u-number-span {
    font-family: DIN-Medium;
  }

  .a-list-item {
    border-radius: 16px 16px 16px 16px;
    border: 1px solid #d9d9d9;
  }
}

.u-call1 {
  border-radius: 16px 0 0 16px !important;
}

.u-call2 {
  border-radius: 0 16px 16px 0 !important;
  border-left: none !important;
}

.u-dialog-detial {
  position: absolute !important;
  left: 0;
  padding: 20px;
  width: 100%;
  height: calc(100vh - 130px);
}

.itemActive {
  background-color: #ecf6ff !important;
}
</style>
